<script setup>
	import {
		ElButton,
		ElInput,
		ElTable,
		ElTableColumn,
		ElTree,
		ElMessage
	} from "element-plus"
	import {
		onMounted,
		ref,
		reactive
	} from "vue"
	import {
		getRoleList,
		searchRole,
		deletRoleFn,
		addRoleFn,
		updateRoleFn,
		getAllMenuList
	} from "../api"
	import Header from "@/components/Header.vue"
	//表格中的数据
	let tableData = ref([{

	}])
	let pageIndex = ref(1);
	let pageSize = 6;
	let total = ref(0)

	const roleList = async () => {
		let res = await getRoleList({
			pageIndex: pageIndex.value,
			pageSize: pageSize,
			siteId: 1
		})
		// console.log("roleList",res)
		tableData.value = res.list
		total.value = res.pageCount
	}
	onMounted(() => {
		roleList()
	})

	//搜索
	const search = async () => {
		let data = {
			pageIndex: pageIndex.value,
			pageSize: pageSize,
			roleName: input.value,
			siteId: 1
		}
		if(data.roleName==""){
			delete data.roleName
		}
		let res = await searchRole(data)
		tableData.value = res.list
		total.value = res.pageCount
	}
	//重置
	let input = ref(""); //搜索框
	const reset = async () => {
		input.value = "";
		search()
	}
	//删除模态框
	const deletDialog = ref(false)
	let deletRoleId = null;
	const delet = (data) => {
		deletDialog.value = true
		deletRoleId = data
		sessionStorage.setItem("RoleId", null)
		sessionStorage.setItem("RoleId", deletRoleId)
	}
	const deletRole = async () => {
		deletDialog.value = false
		let data = {
			roleId: Number(sessionStorage.getItem("RoleId"))
		}
		let res = await deletRoleFn(data)
		// console.log("删除角色",res)
		ElMessage({
			message: '删除成功',
			type: 'success',
		})
		roleList()
	}
	//新增角色
	const addDialog = ref(false)
	// const radio1=ref(0)
	let item = reactive({
		roleName: "",
		createTime: "",
		siteId: 1,
		roleStatus: 0,
		menuId:[]
	})
	// 树形控件
	const defaultProps = {
		children: 'childs',
		label: 'menuName',
		disabled: 'disabled',
	}
	let data = [

	]
	let FirstList = []
	onMounted(async () => {
		let res = await getAllMenuList({
			"roleId": 0
		})
		// console.log("接口所有菜单", res)

		res = res.filter(v => v.menuPath.slice(0, 5) != "/hide")

		res.forEach(v => {

			if (v.childs && v.childs.length != 0) {
				v.childs = v.childs.filter(x => x.menuType != "按钮"); //2
				let childsChilds = v.childs
				v.childs.forEach(v2 => {

					if (v2.childs && v2.childs.length != 0) {
						v2.childs = v2.childs.filter(x => x.menuType != "按钮"); //3
						//console.log(v2.childs)
						v2.childs.forEach(v3 => {
							if (v3.childs && v3.childs.length != 0) {
								v3.childs = v3.childs.filter(x => x.menuType != "按钮")
							}
						})
					}
				})
			}

		})
		data = res
	})
	//获取节点
	let menuArr = []
	const handleCheckChange = (data, checked, indeterminate) => {
		if (checked==true) {
			menuArr.push(data.menuId)
		}
		sessionStorage.setItem("menuArr",menuArr)
	}
	const addRole = async () => {
		addDialog.value = false
		let time = new Date();
		let y = time.getFullYear();
		let m = +time.getMonth() + 1;
		let d = time.getDate();
		let h = time.getHours();
		let min = time.getMinutes();
		let s = time.getSeconds();
		item.createTime = (y + "-0" + m + "-" + d + " " + h + "-" + min + "-" + s)
		item.roleStatus = Number(item.roleStatus)
		let data=sessionStorage.getItem("menuArr")
		data=data.split(",")
		data.filter(v=>{
			v=Number(v)
			item.menuId.push(v)
		})
		let res = await addRoleFn(item) 
		roleList()
	}
	//编辑模态框
	const editDialog = ref(false)
	let item2 = reactive({
		roleName: "",
		roleStatus: 0,
		menuId:[]
	})
	const roleId = (x) => {
		// console.log(x)
		item2.roleName=x.roleName
		item2.roleStatus=x.roleStatus
		item2.roleStatus=="启动" ? (item2.roleStatus=0) : (item2.roleStatus=1);
		// console.log(item2.roleStatus)
		editDialog.value = true;
		sessionStorage.setItem("roleId", x.roleId)
	}
	const edit = async () => {
		editDialog.value = false;
		item2.roleId = Number(sessionStorage.getItem("roleId")) 
		let data=sessionStorage.getItem("menuArr")
		data=data.split(",")
		data.filter(v=>{
			v=Number(v)
			item2.menuId.push(v)
		})
		// console.log(item2)
		let res=await updateRoleFn(item2)
		ElMessage({
			message: '修改成功',
			type: 'success',
		})
		// console.log("item2",item2)
		roleList()
	}
	//点击分页器

	const changePage = (page) => {
		pageIndex.value = page;
		search()
	}
</script>
<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<div class="box">
					<div class="title" style="margin-bottom: 30px;display: flex;justify-content: space-between;">
						<h3>角色管理</h3>
						<div>
							<el-button type="primary" plain @click="addDialog=true">新增角色</el-button>
						</div>
					</div>
					<div class="header" style=" display: flex; justify-content: space-between;">
						<div>
							<span style="color:#333">账号</span>
							<el-input v-model="input" style="width: 210px;height: 30px;margin: 0 10px;" placeholder="请输入角色名称" />
							<el-button type="primary" @click="search">搜索</el-button>
							<el-button @click="reset">重置</el-button>
						</div>
						
						
					</div>
					<div class="table">
						<el-table :data="tableData" style="width: 100%" height="47vh">
							<el-table-column prop="roleName" label="角色名称" />
							<el-table-column prop="roleStatus" label="状态" />
							<el-table-column prop="createTime" label="创建时间" />
							<el-table-column label="操作">
								<template #default="scope">
									<el-button link :disabled="scope.row.roleId== 0 ? true : false" @click="roleId(scope.row)">
										编辑
									</el-button>
									<el-button link :disabled="scope.row.roleId== 0  ? true : false" @click="delet(scope.row.roleId)">
										删除
									</el-button>
								</template>    
							</el-table-column>
						</el-table>
					</div>
				</div>
				<el-pagination layout="prev,pager,next" :page-count="total" :page-size="pageSize"
					v-model:current-page="pageIndex" @current-change="changePage"></el-pagination>

			</el-main>
		</el-container>
	</div>
	<!-- 删除模态框 -->
	<el-dialog v-model="deletDialog" title="提示" width="500">
		<span>
			确定要删除该角色吗？
		</span>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="deletDialog = false">取消</el-button>
				<el-button type="primary" @click="deletRole">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 新增角色 -->
	<el-dialog v-model="addDialog" title="新增角色" width="500" >
		<div style="margin-left: 50px;">
			角色名称 <el-input v-model="item.roleName" placeholder="请输入角色名称" maxlength="10"
				style="width: 240px;"></el-input>
		</div>
		<div style="margin-left: 50px;">
			状态
			<el-radio-group v-model="item.roleStatus" class="ml-4">
				<el-radio :value="0" size="large">启动</el-radio>
				<el-radio :value="1" size="large">停用</el-radio>
			</el-radio-group>
			<el-tree style="max-width: 600px" :data="data" :props="defaultProps" show-checkbox 
				@check-change="handleCheckChange" />
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="addDialog = false">取消</el-button>
				<el-button type="primary" @click="addRole">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 编辑模态框 -->
	<el-dialog v-model="editDialog" title="编辑" width="500">
		<div style="margin-left: 50px;">角色名称
			<el-input v-model="item2.roleName" placeholder="" size="default" clearable style="width: 240px;"></el-input>
		</div>
		<div style="margin-left: 50px;">
			状态
			<el-radio-group v-model="item2.roleStatus" class="ml-4">
				<el-radio :value="0" size="large">启动</el-radio>
				<el-radio :value="1" size="large">停用</el-radio>
			</el-radio-group>
		</div>
		<el-tree style="max-width: 600px;margin-left: 50px;" :data="data" :props="defaultProps" show-checkbox
			@check-change="handleCheckChange" />
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="editDialog = false">取消</el-button>
				<el-button type="primary" @click="edit">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="less" scoped>
	.box {
		width: 100%;
		// border:1px solid red;
		padding: 20px;
		box-sizing: border-box;

		
	}

	.common-layout {
		background: #f2f3f5;

		.el-header {
			padding: 0 !important;
			height: 10vh;
		}

		.el-main {
			height: 86vh;
			padding: 0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.el-table .cell{
		.el-button{
			color: #4b5db9;
		}
	}
	
</style>